<template>
  <div class="card">
    <h1>login</h1>
    <div class="row">
      <label for="" class="col">用户名</label
      ><input class="col" type="text" v-model="username" id="username" />
    </div>
    <div class="row">
      <label for="" class="col">密码</label
      ><input type="password" class="col" v-model="password" />
    </div>
    <div class="row">
      <button type="button" @click="login" class="col-6">马上登陆</button>
    </div>
    <div class="row">
      <div class="col">当前用户：{{ username }}</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Login",
  components: {},
  data() {
    return {
      username: "ratton",
      password: "ratton"
    };
  },
  methods: {
    login() {
        this.$axios.get("/login").then(response => {
            if (response.data.status == 200) {
                let token = response.data.data;
                this.$store.commit("saveToken", token);
                alert(`token: ${token}`);
                // alert("执行了登录");
            }else {
                alert(response.data.msg);
            }
        }).catch(error => alert(error));
    //   alert("假装执行了登录");
    }
  }
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.card {
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 25%;
  min-width: 300px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 3px 0px #ccc;
  padding: 1rem;
}
.row {
  display: flex;
  margin-top: 2rem;
  margin-bottom: 2rem;
  justify-content: center;
}
.col {
  flex: 1;
}
.col-6 {
  width: 50%;
}
button {
  /* -moz-transition-duration: 400ms; */
  transition-duration: 400ms;
  border: none;
  border-radius: 4px;
  background: #359167;
  color: white;
  padding: 0.25rem;
  margin: 0.25rem;
}
button:hover {
  filter: brightness(125%);
}
input {
  border-radius: 3px;
  border: solid 1px #ccc;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  outline: none;
}
input:focus {
  box-shadow: 0 0 6px 2px rgb(235, 235, 235);
  /* outline: black solid 2px; */
}
</style>
